<template>
  <div class="talk">
    <home-header />
    <div class="talkBanner">
      <talk-banner />
    </div>
    <div class="talkTitle">
      态度决定一切
    </div>
    <el-timeline>
      <el-timeline-item class="itemTime" color='#49b1f5' :hollow="true"
        :timestamp="dayjs(item.createTime-0).format('YYYY-MM-DD HH:mm')" placement="top" v-for="item in talkList "
        :key="item._id">
        <el-card>
          <el-row>
            <el-col :span="2">
              <div class="avatar">
                <el-avatar
                  :src="item.avatar ? $store.state.UrlBase+item.avatar :`https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png`"
                  :size='50'>
                </el-avatar>
              </div>
            </el-col>
            <el-col :span="21">
              <h4 class="username">{{item.username}}</h4>
              <p class="info">{{item.talk}}</p>
              <p class="createTime">{{dayjs(item.createTime-0).format('YYYY-MM-DD HH:mm')}}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <div class="end" v-show="(talkList.length === numAll)">
      你看见了世界尽头
      <svg t="1666922444192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="8309" width="50" height="50">
        <path d="M239.0016 318.6688m-18.8416 0a18.8416 18.8416 0 1 0 37.6832 0 18.8416 18.8416 0 1 0-37.6832 0Z"
          fill="#d81e06" p-id="8310"></path>
        <path d="M389.9392 318.6688m-18.8416 0a18.8416 18.8416 0 1 0 37.6832 0 18.8416 18.8416 0 1 0-37.6832 0Z"
          fill="#d81e06" p-id="8311"></path>
        <path
          d="M815.3088 962.9696H649.216c-38.912 0-70.656-31.744-70.656-70.656s31.744-70.656 70.656-70.656h105.6768c5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24H649.216c-27.648 0-50.176 22.528-50.176 50.176s22.528 50.176 50.176 50.176h166.0928c27.648 0 50.176-22.528 50.176-50.176V212.992c0-32.768 26.624-59.392 59.392-59.392s59.392 26.624 59.392 59.392v80.896c0 5.7344-4.5056 10.24-10.24 10.24s-10.24-4.5056-10.24-10.24V212.992c0-21.504-17.408-38.912-38.912-38.912s-38.912 17.408-38.912 38.912v679.3216c0 38.912-31.744 70.656-70.656 70.656z"
          fill="#d81e06" p-id="8312"></path>
        <path
          d="M825.5488 614.4c-3.6864 0-7.3728-2.048-9.216-5.7344C749.568 474.9312 624.64 399.5648 556.032 366.592c-5.12-2.4576-7.168-8.6016-4.7104-13.7216 2.4576-5.12 8.6016-7.168 13.7216-4.7104 70.8608 34.2016 200.2944 112.2304 269.7216 251.4944 2.4576 5.12 0.4096 11.264-4.5056 13.7216-1.6384 0.6144-3.072 1.024-4.7104 1.024zM392.8064 932.6592c-38.912 0-70.656-31.744-70.656-70.656V595.3536c-12.4928-9.4208-48.9472-39.1168-74.752-77.6192-3.072-4.7104-1.8432-11.0592 2.8672-14.1312s11.0592-1.8432 14.1312 2.8672c28.672 43.008 73.3184 75.1616 73.728 75.5712l4.3008 3.072V862.208c0 27.648 22.528 50.176 50.176 50.176s50.176-22.528 50.176-50.176V656.7936c0-7.7824 4.5056-14.7456 11.6736-17.8176 7.168-3.072 15.1552-1.8432 20.8896 3.2768 31.744 28.2624 115.5072 96.4608 206.848 119.3984 5.5296 1.4336 8.8064 6.9632 7.3728 12.4928-1.4336 5.5296-6.9632 8.8064-12.4928 7.3728-94.208-23.552-179.6096-92.3648-213.8112-122.4704v202.9568c0.2048 38.912-31.5392 70.656-70.4512 70.656zM314.368 494.7968c-80.4864 0-146.0224-65.536-146.0224-146.0224 0-2.2528 0-4.5056 0.2048-6.5536-19.8656-29.2864-30.5152-63.488-30.5152-99.1232 0-97.28 79.0528-176.3328 176.3328-176.3328s176.3328 79.0528 176.3328 176.3328c0 35.2256-10.4448 69.4272-30.1056 98.5088l-0.6144 0.6144c-0.6144 43.4176-16.384 82.5344-44.4416 110.7968-26.624 27.0336-62.6688 41.7792-101.1712 41.7792z m-129.024-164.2496c2.4576 2.048 4.096 5.12 3.8912 8.6016v0.4096c-0.2048 3.072-0.4096 6.144-0.4096 9.216 0 69.2224 56.32 125.5424 125.5424 125.5424 32.9728 0 63.8976-12.6976 86.8352-35.6352 24.9856-25.1904 38.7072-60.6208 38.5024-99.9424v-3.6864l4.3008-5.12c17.2032-25.6 26.2144-55.5008 26.2144-86.6304 0-86.016-69.8368-155.8528-155.8528-155.8528s-155.8528 69.8368-155.8528 155.8528c0 31.1296 9.216 61.2352 26.8288 87.2448z"
          fill="#d81e06" p-id="8313"></path>
        <path
          d="M314.368 278.1184l-8.8064-14.7456c-0.4096-0.6144-43.6224-70.656-126.976-70.656-5.7344 0-10.24-4.5056-10.24-10.24s4.5056-10.24 10.24-10.24c73.1136 0 117.9648 45.4656 135.7824 68.1984 17.8176-22.7328 62.6688-68.1984 135.7824-68.1984 5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24c-83.7632 0-126.5664 69.8368-126.976 70.656l-8.8064 14.7456zM143.5648 351.4368c-55.5008 0-100.7616-45.2608-100.7616-100.7616S88.064 149.9136 143.5648 149.9136c5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24c-44.2368 0-80.2816 36.0448-80.2816 80.2816 0 50.176 46.2848 89.7024 98.304 78.2336 5.5296-1.2288 11.0592 2.2528 12.288 7.7824 1.2288 5.5296-2.2528 11.0592-7.7824 12.288-7.5776 1.6384-15.1552 2.4576-22.528 2.4576zM475.7504 351.4368c-4.3008 0-8.3968-0.2048-12.4928-0.6144-5.5296-0.6144-9.6256-5.7344-9.0112-11.264 0.6144-5.5296 5.7344-9.6256 11.264-9.0112 3.2768 0.4096 6.7584 0.6144 10.0352 0.6144 44.2368 0 80.2816-36.0448 80.2816-80.2816 0-41.1648-30.72-75.5712-71.2704-79.872-5.5296-0.6144-9.6256-5.7344-9.0112-11.264 0.6144-5.5296 5.7344-9.6256 11.264-9.0112 50.9952 5.5296 89.7024 48.7424 89.7024 100.352 0 55.0912-45.2608 100.352-100.7616 100.352zM567.0912 886.784c-1.8432 0-3.4816-0.4096-5.12-1.4336-20.48-11.8784-33.1776-33.9968-33.1776-57.5488 0-36.6592 29.9008-66.56 66.56-66.56 5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24c-25.3952 0-46.08 20.6848-46.08 46.08 0 16.384 8.8064 31.5392 22.9376 39.936 4.9152 2.8672 6.5536 9.216 3.6864 13.9264-1.8432 3.2768-5.3248 5.12-8.8064 5.12z"
          fill="#d81e06" p-id="8314"></path>
        <path
          d="M303.7184 858.112c-1.6384 0-3.2768-0.4096-4.9152-1.2288-22.528-12.4928-36.6592-36.0448-36.6592-61.8496V583.68c0-5.7344 4.5056-10.24 10.24-10.24s10.24 4.5056 10.24 10.24v211.3536c0 18.2272 10.0352 35.0208 26.0096 43.8272 4.9152 2.6624 6.7584 9.0112 4.096 13.9264-1.8432 3.4816-5.3248 5.3248-9.0112 5.3248z"
          fill="#d81e06" p-id="8315"></path>
      </svg>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { onMounted, reactive, toRefs, onUnmounted } from 'vue'
import http from '@/utils/http'
import HomeHeader from '@/components/home/HomeHeader.vue'
import TalkBanner from '@/components/talk/TalkBanner.vue'
export default {
  components: { HomeHeader, TalkBanner },
  name: 'HomeTalk',
  setup (props) {
    let page = 1
    const data = reactive({
      numAll: 0,
      talkList: [],
      // 懒加载
      isLoad: true
    })
    onMounted(() => {
      getTalkList()
      window.addEventListener('scroll', windowScoll1)
    })
    function getTalkList () {
      if (!data.isLoad) return
      data.isLoad = false
      http.get(`/talk?page=${page++}&limite=`).then(res => {
        console.log("请求数据label");
        data.numAll = res.data.info.num
        data.talkList.push(...res.data.info.data)
        data.isLoad = true
      })
    }
    // 定义懒加载window滚动 事件
    function windowScoll1 () {
      if (!data.isLoad) return
      if (data.talkList.length === data.numAll) return
      const bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop
      let allHeight = bodyScrollTop + window.innerHeight
      const ul = document.querySelector('.talk')
      ul && (allHeight = (ul.offsetHeight + ul.offsetTop) - allHeight)
      allHeight < 0 && getTalkList()
    }
    onUnmounted(() => {
      window.removeEventListener('scroll', windowScoll1)
    })
    return {
      ...toRefs(data),
      dayjs
    }
  }
}
</script>
<style lang="scss">
.el-card.is-always-shadow {
  border-radius: 15px;
}
.el-timeline-item__tail {
  border-left: 2px solid #fff;
  font-size: 14px;
}
.itemTime {
  transition: all 0.5s;
  &:hover {
    transform: translateY(-3px);
  }
}

.el-timeline-item__timestamp {
  color: #49b1f5 !important;
}
.el-timeline-item__node.el-timeline-item__node--normal {
  left: 0 !important;
}
</style>
<style lang="scss" scoped>
.talkBanner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  height: 400px;
}
.talk {
  padding-top: 400px;
}
.card {
  border-radius: 15px;
  overflow: hidden;
  > div {
    display: flex;
  }
}

.info {
  width: 100%;
  overflow: auto;
  margin: 20px 0 13px;
  font-size: 16px;
}
.createTime {
  color: #999;
  font-size: 12px;
}
.username {
  font-weight: 700;
  font-size: 16px;
  font-weight: 900;
}
.talk {
  min-height: 500px;
  max-width: 1000px;
  margin: 20px auto;
  overflow: hidden;
  .talkTitle {
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 5px;
  }
}
.end {
  text-align: center;
  color: #888;
  margin: 30px 0 0px;
}
</style>